import { useStyles } from '@/hooks/styles'
import { Button } from '@/components/universal/Button/Button'
import React from 'react'
import { Button as AntDButton } from 'antd'

const UITest = () => {
  const styleClass = useStyles()

  return (
    <div {...styleClass([], { display: 'flex', flexDirection: 'column' })}>
      <div style={{ display: 'flex', flexDirection: 'row', zIndex: 1 }}>
        <AntDButton type={'primary'}>SUMMARIZE</AntDButton>
        <Button>添加资产1</Button>
        <Button>添加资产2</Button>
        <Button>连线</Button>
        <Button>添加方法1</Button>
        <Button>添加方法2</Button>
        <Button>test1</Button>
        <Button>test2</Button>
      </div>
      <div>primary</div>
      <div style={{ display: 'flex', flexDirection: 'row' }}>
        <Button type="primary" size="large">
          large
        </Button>
        <Button type="primary" size="default">
          default
        </Button>
        <Button type="primary" size="small">
          small
        </Button>
        <Button type="primary" size="mini">
          mini
        </Button>
        <Button type="primary" loading={true}>
          loading
        </Button>
        <Button type="primary" disabled={true}>
          disabled
        </Button>
        {/* <AntDButton type={'dashed'}>4444</AntDButton> */}
      </div>

      <div>default</div>
      <div style={{ display: 'flex', flexDirection: 'row' }}>
        <Button type="default" size="large">
          large
        </Button>
        <Button type="default" size="default">
          default
        </Button>
        <Button type="default" size="small">
          small
        </Button>
        <Button type="default" size="mini">
          mini
        </Button>
        <Button type="default" loading={true}>
          loading
        </Button>
        <Button type="default" disabled={true}>
          disabled
        </Button>
        {/* <AntDButton type={'dashed'}>4444</AntDButton> */}
      </div>

      <div>neutral</div>
      <div style={{ display: 'flex', flexDirection: 'row' }}>
        <Button type="neutral" size="large">
          large
        </Button>
        <Button type="neutral" size="default">
          default
        </Button>
        <Button type="neutral" size="small">
          small
        </Button>
        <Button type="neutral" size="mini">
          mini
        </Button>
        <Button type="neutral" loading={true}>
          loading
        </Button>
        <Button type="neutral" disabled={true}>
          disabled
        </Button>
        {/* <AntDButton type={'dashed'}>4444</AntDButton> */}
      </div>

      <div>outline</div>
      <div style={{ display: 'flex', flexDirection: 'row' }}>
        <Button type="outline" size="large">
          large
        </Button>
        <Button type="outline" size="default">
          default
        </Button>
        <Button type="outline" size="small">
          small
        </Button>
        <Button type="outline" size="mini">
          mini
        </Button>
        <Button type="outline" loading={true}>
          loading
        </Button>
        <Button type="outline" disabled={true}>
          disabled
        </Button>
        {/* <AntDButton type={'dashed'}>4444</AntDButton> */}
      </div>

      <div>text</div>
      <div style={{ display: 'flex', flexDirection: 'row' }}>
        <Button type="text" size="large">
          large
        </Button>
        <Button type="text" size="default">
          default
        </Button>
        <Button type="text" size="small">
          small
        </Button>
        <Button type="text" size="mini">
          mini
        </Button>
        <Button type="text" loading={true}>
          loading
        </Button>
        <Button type="text" disabled={true}>
          disabled
        </Button>
        {/* <AntDButton type={'dashed'}>4444</AntDButton> */}
      </div>
    </div>
  )
}

export default UITest
